<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>BMI计算器</title>
    <meta name="description" content="BMI计算器">
    <meta name="author" content="邢栋">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <link rel="icon" type="image/x-ico" href="icon192.jpg">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <script>navigator.serviceWorker.register("sw.js")</script>
    <script>/*@cc_on window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
</head>

<body>
    <a href="https://github.com/xclala/BMI">
        <img src="../github.svg">
    </a>
    <br>
    <p></p>
    <p></p>
    <a href="..">🔙<br></a>
    <h1>BMI计算器</h1>
    <form align="center">
        <input id="kg" onkeyup="bmi()" placeholder="体重（千克）" type="number">
        <label>体重（千克）</label>
        <p></p>
        <input id="cm" onkeyup="bmi()" placeholder="身高（厘米）" type="number">
        <label>身高（厘米）</label>
        <p></p>
        <strong id="BMI"></strong>
        <p></p>
        <strong id="mx"></strong>
        <p></p>
        <button type="reset">清空</button>
        <script>
            function bmi() {
                let heavy = Math.abs(document.getElementById("kg").value)
                let tall = Math.abs(document.getElementById("cm").value / 100)
                let BMI = heavy / tall ** 2
                if (document.getElementById("cm").value != '') {
                    document.getElementById("BMI").innerHTML = "BMI:" + Math.round(BMI * 100) / 100 //四舍五入到百分位
                }
                if (BMI < 18.5) {
                    document.getElementById("mx").innerHTML = "低于正常体重"
                    document.getElementById("mx").style.color = "red"
                } else if (BMI < 25) {
                    document.getElementById("mx").innerHTML = "正常体重"
                    document.getElementById("mx").style.color = "green"
                } else if (BMI < 30) {
                    document.getElementById("mx").innerHTML = "超重"
                    document.getElementById("mx").style.color = "red"
                } else {
                    document.getElementById("mx").innerHTML = "肥胖"
                    document.getElementById("mx").style.color = "red"
                }
            }
        </script>
    </form>
    <a href="qrcode.png">二维码</a>
    <style>
        html {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        h1 {
            text-align: center;
        }

        a {
            text-decoration-line: none;
        }

        a:hover {
            font-weight: bolder;
        }

        @media(prefers-color-scheme:dark) {
            body {
                background-color: #111114;
            }

            h1,
            label,
            #BMI {
                color: white;
            }

            a {
                color: orangered;
            }
        }

        @media(prefers-color-scheme:light) {
            body {
                background-color: whitesmoke;
            }

            h1,
            label,
            #BMI {
                color: black;
            }

            a {
                color: blue;
            }
        }
    </style>
    <script>
        const BACKGROUNDCOLOR = ['#111114', 'whitesmoke']
        const TEXTCOLOR = ['white', 'black']
        const LINKCOLOR = ['orangered', 'blue']
        let c = 0
        document.getElementsByTagName("h1")[0].onclick = function () {
            document.body.style.backgroundColor = BACKGROUNDCOLOR[c % 2]
            document.getElementsByTagName("h1")[0].style.color = TEXTCOLOR[c % 2]
            document.getElementsByTagName("label")[0].style.color = TEXTCOLOR[c % 2]
            document.getElementsByTagName("label")[1].style.color = TEXTCOLOR[c % 2]
            document.getElementById("mx").style.color = TEXTCOLOR[c % 2]
            document.getElementById("BMI").style.color = TEXTCOLOR[c % 2]
            document.getElementsByTagName("a")[2].style.color = LINKCOLOR[c % 2]
            c++
        }
    </script>
</body>

</html>